<%@ page contentType="text/html;charset=UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="ctx" value="${pageContext['request'].contextPath}" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="description" content="淘宝官方合作网站， 搜折扣 立返现，返利最快最多的淘宝返利网，最高60%的返利网" >
<meta http-equiv="keywords" content="淘宝返利网, 返利网, 淘宝返现网, 返利, 返现, 返还, 淘宝秒杀, 淘宝折扣, 秒杀, 淘金币, 聚划算, 试用中心, 优惠券" >
<title>${applicationScope.sysconfig.system_name }返利网</title>
<SCRIPT type="text/javascript" src="${ctx }/static/js/jquery-1.7.2.min.js"></SCRIPT>

<!-- bootstrap -->
	<link rel="stylesheet" type="text/css" media="screen"
		href="${ctx }/static/bootstrap/css/bootstrap.css">
	<link rel="stylesheet" type="text/css" media="screen"
		href="${ctx }/static/bootstrap/css/bootstrap-responsive.css">
	<SCRIPT type="text/javascript" src="${ctx }/static/bootstrap/js/bootstrap.min.js">
<!-- 
	<link rel="stylesheet" type="text/css" media="screen"
		href="${ctx }/static/bootstrap/css/docs.css">-->

<!-- zeroClipboard -->
<SCRIPT type="text/javascript" src="${ctx }/static/ZeroClipboard/ZeroClipboard.js"></script>

<SCRIPT type="text/javascript" src="${ctx }/static/js/jquery-ui-1.8.21.custom.min.js"></SCRIPT>
<link type="text/css" href="${ctx }/static/css/flick/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
<script src="http://a.tbcdn.cn/apps/top/x/sdk.js?appkey=12668380"></script> 
<SCRIPT type="text/javascript">
$(function(){
	
	var flag = 0;
	$("#newer_help_btn").mouseover(function(){
		flag = 1;
		$("#newer_help_msg").show();
		$(this).html("新手帮助←");
	}).mouseout(function(){
		flag = 0;
		setTimeout(function(){
			if(flag == 0) {
				$("#newer_help_msg").hide();
				$(this).html("新手帮助→");
			}
		}, 500);
	});
	$("#newer_help_msg").mouseover(function(){
		flag = 1;
		$("#newer_help_msg").show();
		$("#newer_help_btn").html("新手帮助←");
	}).mouseout(function(){
		if(flag == 1) {
			flag = 0;
			setTimeout(function(){
				if(flag == 0) {
					$("#newer_help_msg").hide();
					$("#newer_help_btn").html("新手帮助→");
				}
			}, 500);
		}
	});
	
	/* flash实现复制功能，多浏览器兼容
	$('.CopyToClipboard').each(function () {
		ZeroClipboard.setMoviePath("${ctx}/static/ZeroClipboard/ZeroClipboard.swf");
		var clip = new ZeroClipboard.Client();
		clip.setHandCursor( true );
		clip.addEventListener('load', function (client) {
		});
		clip.addEventListener('mouseOver', function (client) {
			// update the text on mouse over
			clip.setText( $("#invite_url").val() );
		});
		clip.addEventListener('complete', function (client, text) {
			alert("内容已复制到粘贴板");
		});
		clip.glue( 'd_clip_button', 'd_clip_container');
		//clip.glue('copy', 'copy_parent');
	}); */
	
	$("#bottom").load("${ctx}/bottom");
})

var clip = null;
function tuiguang() {
	$("#tuiguang_box").modal().addClass("modal");
	ZeroClipboard.setMoviePath("${ctx}/static/ZeroClipboard/ZeroClipboard.swf");
	if(clip == null) {
		clip = new ZeroClipboard.Client();
		clip.setHandCursor( true );
		clip.addEventListener('load', function (client) {
		});
		clip.addEventListener('mouseOver', function (client) {
			clip.setText( $("#invite_url").val() );
		});
		clip.addEventListener('complete', function (client, text) {
			alert("内容已复制到粘贴板");
		});
		clip.glue( 'd_clip_button', 'd_clip_container', {
			//计算不出按钮的位置，所以手动设定
			position: 'absolute',
			left: '290px',
			top: '90px',
			width: '50px',
			height: '30px',
		});
	}
}
function addFav() {
   if (document.all) {
      window.external.addFavorite('${applicationScope.sysconfig.system_website }','${applicationScope.sysconfig.system_name }');
   } else if (window.sidebar) {
      window.sidebar.addPanel('${applicationScope.sysconfig.system_name }', '${applicationScope.sysconfig.system_website }', "");
   }
}




function tryConvert()
{

	var url = $("#url").val();
	if( url == null || url == "" || url.length == 0) {
		alert("请填写宝贝地址");
		return false;
	}
	var i = 0, j = 0;
	for(i = 2; i < url.length - 1; i++) {
		if ( (url[i-2] == '?' || url[i-2] == '&') && url[i-1] == 'i' && url[i] == 'd' && url[i+1] == '=' ) {
			j = i;
			i = 9999;
		}
	}
	var iid = 0;
	j+=2;
	for(; j < url.length && url[j] >= '0' && url[j] <= '9'; j++) {
		iid = (url[j] - '0') + iid * 10;
	}

	var btn = $("#btn");
	btn.addClass("disabled").attr("disabled", "");
	setTimeout(function() {
		btn.removeClass("disabled").removeAttr("disabled");
	}, 2000);
	
    var request =
    {
        	method: 'taobao.taobaoke.widget.items.convert',
        	fields: 'title, pic_url,price, nick, num_iid,click_url,iid,commission,commission_rate,commission_num,volume',
        	num_iids: [iid],
			outer_code: ${outer_code}
    };
    TOP.api(request, function(response)
    {
        if(response.error_response)
        {
            return;
        }
        var item = response.total_results == 1 ? response.taobaoke_items.taobaoke_item[0] : null;
        if(item == null) {
				$("#msg").slideDown(500);
				$("#url_box").addClass("error");
				setTimeout(function(){
					$("#url_box").removeClass("error");
				}, 2000);
        } else {
        	$("#pic").attr("src", item.pic_url + "_210x210.jpg");
			$("#title").html(item.title);
			$("a.click_url").attr("href", item.click_url);
			$("#nick").html(item.nick);
			$("a.shop_click_url").attr("href", item.shop_click_url);
			$("#price").html(item.price + "元");
			<shiro:guest>
				$("#commission").html("<span style='color:red'>游客无法查看</span>!请先<a href='${ctx}/user/_login'>登录</a>, 或<a href='"+ item.click_url +"' target='_blank'>直接购买</a>");
			</shiro:guest>
			<shiro:user>
				$("#commission").html( (item.commission * ${rate}).toFixed(2)  + "元");
			</shiro:user>
			//$("#detail").modal();//bootstrap中的模态窗口
			$("#detail").attr("title", item.title).dialog({
				width:600,
				height: 200,
				autoOpen: true,
				modal: true,
				resizable: false,
				buttons: {
					'点击购买，获取返利':function(){
						//window.location.href=data.clickUrl;
						window.open(item.click_url);
						$(this).dialog('close');
					},  
					'取消':function(){  
						$(this).dialog('close');
					}  
				}
			});
        }
    });
}
</SCRIPT>
<STYLE type="text/css">
BODY {
	position: relative;
	background-color: #fff;
	background-image: url(${ctx}/static/bootstrap/img/grid-18px-masked.png);
	background-repeat: repeat-x;
	background-position: 0 40px;
}

a{
	TEXT-DECORATION: none;
}
#logo {
	width:480px;
	margin:50px auto;
}


/*滚动 css*/
#display {	POSITION: fixed;	left:50px;	bottom:30px;	right: 50px;	height: 200px;	box-shadow: 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 25px rgba(82, 168, 236, 0.6);	background: #FFF;	overflow:hidden;}
#demo img {border: 3px solid #F2F2F2;}
#indemo {float: left;width: 800%;}
#demo1 {float: left;}
#demo2 {float: left;}

/*新手帮助*/

#newer_help {width: 400px; position: fixed; LEFT: 1px; top: 200px; }
#newer_help_msg {display:none; padding-top: 20px; padding-left:20px;  padding-bottom: 20px; float: right; width: 350px; border:2px solid #25AAE1;}
#newer_help_msg li {
	BACKGROUND-COLOR:#fff;
	FONT-SIZE: 14px;
	padding: 3px;
}
#newer_help_btn {width: 15px; padding: 5px; border: 1px dashed #F79421; color: #fff; CURSOR: pointer; BACKGROUND-COLOR: #0066CC;}

#bottom {
	POSITION: fixed;
	bottom:0;
	left:0;
	right:0;
	padding:10px;
	padding-bottom:30px;
}

</STYLE>
</head>
<body>
	<div class="navbar">
    <div class="navbar-inner">
      <div class="container">
        <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>
          <a href="${ctx }" class="brand">~${applicationScope.sysconfig.system_name }~</a>
        <!--<IMG alt=""  class="brand" width="60" src="${ctx }/static/image/logo-left-top.png">-->
        <div class="nav-collapse">
          <ul class="nav">
            <shiro:user>
            	<li><a href="${ctx }/user/home">我的空间</a></li>
            </shiro:user>
            <li class="dropdown">
              <a data-toggle="dropdown" class="dropdown-toggle" href="#">喜欢本站 <b class="caret"></b></a>
              <ul class="dropdown-menu">
             <!-- 
                <li><a href="javascript:void(0)"  >桌面快捷</a></li>
                <li><a href="#">设为首页</a></li>
              -->
              <!-- 
                <li><a href="javascript:void(0)" onclick="addFav()">加入收藏夹</a></li>
               -->  
                <shiro:user>
                	<li><a href="javascript:void(0)" onclick="tuiguang()">推广好友</a></li>
                	<!-- <li><a href="#myModal" data-toggle="modal">推广好友</a></li>-->
                </shiro:user>
                <li class="divider"></li>
              </ul>
            </li>
          </ul>
          <!-- 
          <form action="" class="navbar-search pull-left">
            <input type="text" placeholder="Search" class="search-query span2">
          </form> -->
          <ul class="nav pull-right">
            <li><a href="#">欢迎：</a></li>
				<shiro:guest>
					<li><a href="${ctx }/user/_login">登录</a></li>
					<c:choose>
						<c:when test="${inviter==null }">
							<li><a href="${ctx }/user/_regist">注册</a></li>
						</c:when>
						<c:otherwise>
							<li><a href="${ctx }/user/_regist/?inviter=${inviter}">注册</a></li>		
						</c:otherwise>
					</c:choose>
				</shiro:guest>
				<shiro:user>
					<shiro:hasRole name="管理员">
						<li><a href="${ctx }/admin">进入后台</a></li>
					</shiro:hasRole>
					<shiro:lacksRole name="管理员">
						<li><a href="${ctx }/user/home">用户中心</a></li>
					</shiro:lacksRole>
					<li><a href="${ctx }/user/logout">注销</a></li>
				</shiro:user>
			</ul>
        </div><!-- /.nav-collapse -->
      </div>
    </div><!-- /navbar-inner -->
  </div>
  
  <!-- logo begin -->
  <div id="logo">
  		<a href="${ctx }">
  			<img src="${ctx }/static/image/logo.png"/>
  		</a>
  </div>
  <!-- logo end -->
  
  	<!-- search box begin -->
	<div style="margin:50px auto; width: 600px;">
		<div id="url_box" class="control-group">
			<div class="controls">
				<div class="input-append">
					<input type="text" name="url" style="padding:15px;" class="span5 input-large" size="30" placeholder="复制宝贝地址到此处" id="url"/><input type="button" style="padding:15px;" id="btn" value="返利" class="btn btn-primary" value="返利!" onclick="tryConvert()"/>
				</div>
			</div>
		</div>
		<div class="alert alert-error span4" id="msg" style="display:none;">
			<button onclick="$('#msg').slideUp(500)" class="close" type="button">×</button>
			<strong>出错啦!</strong> 您查询的宝贝没有返利.
		</div>
	</div>	
  	<!-- search box end -->
	
		<!-- bootstrap中的模态窗口使用 <table class="modal hide fade" id="detail">-->
		<table style="DISPLAY: none;" class="table table-bordered table-striped" id="detail">
			<tr>
				<td rowspan="5" width="210px">
					<a href="" class="click_url" target="_blank">
						<img src="" id="pic" title=""/>
					</a>
				</td>
				<td>
					<a href="" class="click_url" target="_blank">
						<span id="title"></span>
					</a>
				</td>
			</tr>
			<tr>
				<td>
					店铺：
					<a href="" class="shop_click_url" target="_blank" title="店铺推广， 享受全店返利">
						<span id="nick"></span>
					</a>
				</td>
			</tr>
			<tr>
				<td>价格：<span id="price" title="实际价格，具体成交价格以淘宝优惠、活动为准"></span></td>
			</tr>
			<tr>
				<td>返利：<span id="commission" title="理论返利，实际与成交价格（不含邮费）有关"></span></td>
			</tr>
			<tr>
				<td style="color:red; font-size:12px;">注：以上价格是原价，实际价格与返利以淘宝成交为准</td>
			</tr>
		</table>
	
<shiro:user>
<div class="modal hide" id="tuiguang_box">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal">×</button>
		<h3>推广好友，获得奖励</h3>
	</div>
	<div class="modal-body">
		<p>
			推广成功后，好友每次成功购物，您将获取其中的部分返利。复制下面的链接发送给好友:
		</p>
		<div class="controls" >
			<div class="input-append" id="copy_parent">
				<span style="color:red">
					${applicationScope.sysconfig.system_website }?inviter=<shiro:principal property="id" />
				</span>
				<!-- 
				<input type="text" class="span3" id="invite_url" value="${applicationScope.sysconfig.system_website }/user/_regist/?inviter=<shiro:principal property="id" />"/>
		
				<div id="d_clip_container" class="btn btn-primary">
					<div id="d_clip_button" class=""><b>复制</b></div>
				</div>
			 -->
			</div>
		</div>
	</div>
	<div class="modal-footer">
		<a href="#" class="btn" data-dismiss="modal">确定</a>
	</div>
</div>
</shiro:user>

<div id="newer_help">
	<div id="newer_help_msg">
		<ol>
			<li><a href="http://www.taobao.com" target="_blank">淘宝网</a>挑商品</li>
			<li><a href="javascript:void(0)" onclick="$('#url').focus()">搜索返利</a>后去淘宝购买</li>
			<li>确认收货后生成返利订单</li>
			<li>进入<a href="${ctx }/user/home">用户空间</a>申请提现</li>
			<li>提现成功，返利打到支付宝</li>
		</ol>
	</div>
	<div id="newer_help_btn">新手帮助→ </div>
</div>
	
<%-- 滚动显示 pi***ao 购买了"浙江移动10元快充自动充值"返现0.05元 
<div id="display" >
	<div id="indemo">
		<div id="demo1">
			<a href="#" target="_blank"><img src="http://placehold.it/200x200" class="img-polaroid"/></a>
			<a href="#" target="_blank"><img src="http://placehold.it/200x200" class="img-polaroid"/></a>
			<a href="#" target="_blank"><img src="http://placehold.it/200x200" class="img-polaroid"/></a>
			<a href="#" target="_blank"><img src="http://placehold.it/200x200" class="img-polaroid"/></a>
			<a href="#" target="_blank"><img src="http://placehold.it/200x200" class="img-polaroid"/></a>
			<a href="#" target="_blank"><img src="http://placehold.it/200x200" class="img-polaroid"/></a>
			<a href="#" target="_blank"><img src="http://placehold.it/200x200" class="img-polaroid"/></a>&nbsp;
		</div>
		<div id="demo2"></div>
	</div>
</div>
<script>
<!--
var speed=10;
var tab=document.getElementById("display");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
	if(tab2.offsetWidth-tab.scrollLeft<=0) {
		tab.scrollLeft-=tab1.offsetWidth
	} else {
		tab.scrollLeft++;
	}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>
--%>

	<div id="bottom">
	</div>

	<!-- 分享按钮 -->
	<a class="bshareDiv" href="http://www.bshare.cn/share">分享按钮</a><script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/buttonLite.js#uuid=&amp;style=4&amp;fs=4&amp;bgcolor=Blue"></script>
</body>
</html>